<script setup>
import {
    Edit, Delete, Link, Download, Check
} from '@element-plus/icons-vue'
import axios from 'axios';
import { ref} from 'vue'
import { ElMessage, ElMessageBox, ElUpload } from 'element-plus'
import {
    addstaffservice, deletestaffservice, updatestaffservice, getAllservice
} from '@/api/chance.js'

import {
    getallclientservice, getpartkeymanservice, getKeyManByID
} from '@/api/client.js'

import {
    getAllChanceByUserIdservice
} from '@/api/traceuser.js'

import {
    getAllTraceByIdservice, updatetraceuserservice, getAllChanceByUserIdTraceIdservice, addTraceservice
} from '@/api/trace.js'

import {
    userInfoService
} from '@/api/user.js'


import {
    getallareaservice, getalluserservice, moveservice, getallareamasterservice, getallnotareamasterservice
} from '@/api/book.js'


//控制添加分类弹窗
const dialogVisible = ref(false)
const dialogVisible2 = ref(false)
//分页条数据模型
//const pageNum = ref(1)//当前页
const total = ref(20)//总条数

//const pageSize = ref(3)//每页条数
//文章分类数据模型

//定义变量，控制标题
const title = ref('')

//交通路线列表数据模型
const majors = ref([

])




const formref = ref(null); //表单校验
//与后端交互的json数据




const findmodel = ref({
    pageNum: 1,
    pageSize: 5,
    str: '',
    findType: ''
})



const findmodelkey = ref({
    clientcompanyid: null,
    str: '',
})


const chanceOptions = ref({

})
const getAllChanceByUserId = async () => {

    let result = await getAllChanceByUserIdservice(findmodel.value);

    console.log("机会数据是" + JSON.stringify(result.data));
    chanceOptions.value = result.data.filter(item => item.phase !== '已关闭' && item.phase !== '未提交' && item.phase !== '未分配');
}








const stafflist = async () => {


    let result = await userInfoService();
    const userid = result.data.id;
    findmodel.value.str = userid;
    let result2 = await getAllTraceByIdservice(findmodel.value);

    pathmodel2.value.userid = userid;

    total.value = result2.data.total;
    majors.value = result2.data.items;
    console.log("信息:" + JSON.stringify(majors.value));


    getAllChanceByUserId();



}
stafflist();
//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    findmodel.value.pageSize = size;
    stafflist();
}


//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    findmodel.value.pageNum = num;
    stafflist();
}



const cleardata = () => {
    findmodel.value.findType = '';
    findmodel.value.pageNum = 1;

pathmodel2.value.chanceid = null;
pathmodel2.value.userid = null;
pathmodel2.value.visitor = null;
pathmodel2.value.thing = null;
pathmodel2.value.situation = null;
pathmodel2.value.comment = null;
pathmodel2.value.visittime = null;

pathmodel4.value.chance.clientCompany.name = null;
pathmodel4.value.chance.phase = null;
pathmodel4.value.chance.areaname = null;
pathmodel4.value.chance.budget = null;
pathmodel4.value.chance.chancedatetime = null;
pathmodel4.value.user.name = null;



    stafflist();
}
//表单校验
const rules = {


    visitor: [
        { required: true, message: '请输入拜访人', trigger: 'blur' },
    ],
    thing: [
        { required: true, message: '请输入事宜', trigger: 'blur' },
    ],
    situation: [
        { required: true, message: '请输入情况说明', trigger: 'blur' },
    ],
    comment: [
        { required: true, message: '请输入备注', trigger: 'blur' },
    ],
    visittime: [
        { required: true, message: '请选择拜访时间', trigger: 'blur' },
    ]
}

const rules2 = {
    chanceid: [
        { required: true, message: '请输入拜访人', trigger: 'blur' },
    ],
    userid: [
        { required: true, message: '请输入拜访人', trigger: 'blur' },
    ],

    visitor: [
        { required: true, message: '请输入拜访人', trigger: 'blur' },
    ],
    thing: [
        { required: true, message: '请输入事宜', trigger: 'blur' },
    ],
    situation: [
        { required: true, message: '请输入情况说明', trigger: 'blur' },
    ],
    comment: [
        { required: true, message: '请输入备注', trigger: 'blur' },
    ],
    visittime: [
        { required: true, message: '请选择拜访时间', trigger: 'blur' },
    ]
}


const pathmodel3 = ref({
    chancename: null,
    projectname: null,
    phase: null,
    areaname: null,
    budget: null,
    areas: null,
    chancedatetime: null,
    comment: null,
    keymen: null,
    clientcompanyid: null,
    stock: null,
    clue: null
})


const pathmodel = ref({
    id: null,
    chance: {
        chanceid: null,
        chancename: null,
        phase: null,
        areaname: null,
        budget: null,
        chancedatetime: null,
        clientCompany: {
            clientcompanyname: null
        }
    },
    user: {
        id: null,

    },
    visitor: null,
    thing: null,
    situation: null,
    comment: null,
    visittime: null
})


const pathmodel4 = ref({
    id: null,
    chance: {
        chanceid: null,
        chancename: null,
        phase: null,
        areaname: null,
        budget: null,
        chancedatetime: null,
        clientCompany: {
            name: null
        }
    },
    user: {
        id: null,
        name: null
    },
    visitor: null,
    thing: null,
    situation: null,
    comment: null,
    visittime: null
})


const pathmodel2 = ref({

    chanceid: null,
    userid: null,
    visitor: null,
    thing: null,
    situation: null,
    comment: null,
    visittime: null
})


const add = () => {
    title.value = '机会跟踪信息添加';
    cleardata();
    dialogVisible2.value = true;

}

const showDialog = (row) => {
    title.value = '机会跟踪信息编辑';
    dialogVisible.value = true;
    //数据拷贝

    console.log("机会数据是" + JSON.stringify(row));

    pathmodel.value.chance.chanceid = row.chance.chanceid;
    pathmodel.value.chance.chancename = row.chance.chancename;
    pathmodel.value.chance.phase = row.chance.phase;
    pathmodel.value.visitor = row.visitor;
    pathmodel.value.thing = row.thing;
    pathmodel.value.situation = row.situation;
    pathmodel.value.comment = row.comment;
    pathmodel.value.visittime = row.visittime;
    pathmodel.value.id = row.id;
    pathmodel.value.user.id = row.user.id;
    pathmodel.value.chance.clientCompany.clientcompanyname = row.chance.clientCompany.clientcompanyname;
    pathmodel.value.chance.budget = row.chance.budget;
    pathmodel.value.chance.areaname = row.chance.areaname;
    pathmodel.value.chance.chancedatetime = row.chance.chancedatetime;
    pathmodel.value.user.name = row.user.name;

    pathmodel3.value.chancename = row.chance.chancename;
    pathmodel3.value.projectname = row.chance.projectname;
    pathmodel3.value.phase = '跟踪';
    pathmodel3.value.areaname = row.chance.areaname;
    pathmodel3.value.budget = row.chance.budget;
    pathmodel3.value.areas = row.chance.areas;


    pathmodel3.value.chancedatetime = row.chance.chancedatetime;
    const date = new Date(pathmodel3.value.chancedatetime);

    date.setHours(date.getHours() + 8);
    pathmodel3.value.chancedatetime = date.toISOString();


    pathmodel3.value.comment = row.chance.comment;
    pathmodel3.value.keymen = row.chance.keymen;
    pathmodel3.value.clientcompanyid = row.chance.clientcompanyid;
    pathmodel3.value.stock = row.chance.stock;
    pathmodel3.value.clue = row.chance.clue;







    pathmodel3.value.chanceid = row.chance.chanceid;

}


const updatestaff = async () => {


    formref.value.validate(async (valid) => {
        if (!valid) {
            ElMessage.error('信息填写不完整！');
        }
        else {


            pathmodel2.value.chanceid = pathmodel.value.chance.chanceid;
            pathmodel2.value.userid = pathmodel.value.user.id;
            pathmodel2.value.visitor = pathmodel.value.visitor;
            pathmodel2.value.thing = pathmodel.value.thing;
            pathmodel2.value.situation = pathmodel.value.situation;
            pathmodel2.value.comment = pathmodel.value.comment;

            pathmodel2.value.visittime = pathmodel.value.visittime;
            const date = new Date(pathmodel2.value.visittime);

            date.setHours(date.getHours() + 8);
            pathmodel2.value.visittime = date.toISOString();


            //扩展i的属性，将来需要传递给后台，完成分类的修改
            pathmodel2.value.id = pathmodel.value.id;
            let result = await updatetraceuserservice(pathmodel2.value);
            let result2 = await updatestaffservice(pathmodel3.value);
            if (result.code == 0) {
                ElMessage.success("修改成功")
                dialogVisible.value = false;
                stafflist();
            }
            else ElMessage.error(result.message ? result.message : '修改失败')
        }
    });
}

const addstaff = async () => {
    formref.value.validate(async (valid) => {
        if (!valid) {
            ElMessage.error('信息填写不完整！');
        }
        else {

            
            let result = await addTraceservice(pathmodel2.value);
            if (result.code == 0) {
                ElMessage.success("添加成功")
                dialogVisible2.value = false;
                stafflist();
            }
            else ElMessage.error(result.message ? result.message : '添加失败')


        }
    });
}




const handleChanceChange = (newVal) => {
  const selectedChance = chanceOptions.value.find(option => option.chanceid === newVal);
  if (selectedChance) {
    console.log("机会数据是" + JSON.stringify(selectedChance));
    // 更新 pathmodel 数据
    pathmodel4.value.chance.clientCompany.name = selectedChance.clientCompany.clientcompanyname;
    pathmodel4.value.chance.phase = selectedChance.phase;
    pathmodel4.value.chance.areaname = selectedChance.areaname;
    pathmodel4.value.chance.budget = selectedChance.budget;
    pathmodel4.value.chance.chancedatetime = selectedChance.chancedatetime;
    pathmodel4.value.user.name = selectedChance.user.name; // 假设 user.name 存在于 selectedChance 中
  }
};



</script>

<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>机会跟踪</span>
                <div class="extra">
                    <el-button type="primary" @click="add">新增跟踪</el-button>
                </div>
            </div>
        </template>
        <!-- 搜索表单 -->
        <el-form>
            <el-form-item label="查询条件:">
                <el-input v-model="findmodel.findType" placeholder="请输入查询内容" style="width: 300px"></el-input>
                <el-button type="primary" @click="stafflist" style="margin-left: 15px;">搜索</el-button>
                <el-button @click="cleardata">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 文章列表 -->
        <el-table :data="majors" style="width: 100%">
            <el-table-column label="机会名称" prop="chance.chancename"></el-table-column>
            <el-table-column label="状态" prop="chance.phase" width="70"></el-table-column>


            <el-table-column label="拜访人" prop="visitor"></el-table-column>
            <el-table-column label="拜访时间" prop="visittime"></el-table-column>
            <el-table-column label="事宜" prop="thing"></el-table-column>
            <el-table-column label="情况说明" prop="situation"></el-table-column>
            <el-table-column label="备注" prop="comment"></el-table-column>
            <el-table-column label="操作" width="60">
                <template #default="{ row }">
                    <el-button :icon="Edit" circle plain type="primary" @click="showDialog(row)"
                        :disabled="row.chance.phase === '已关闭'"></el-button>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="没有数据" />
            </template>

        </el-table>
        <!-- 分页条 -->
        <el-pagination v-model:current-page="findmodel.pageNum" v-model:page-size="findmodel.pageSize"
            :page-sizes="[5, 10, 15, 20]" layout="jumper, total, sizes, prev, pager, next" background :total="total"
            @size-change="onSizeChange" @current-change="onCurrentChange"
            style="margin-top: 20px; justify-content: flex-end" />


    </el-card>



    <el-dialog v-model="dialogVisible" :title="title" width="60%">

        <el-form :model="pathmodel" ref="formref" :rules="rules" label-width="81px" style="padding-right: 30px">
            <div class="basic-info-border max-width-box">
                <el-row gutter="20">
                    <el-col :span="22">
                        <el-form-item label="机会名称" prop="chancename">
                            <el-input v-model="pathmodel.chance.chancename" disabled></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="客户" prop="clientCompany">
                            <el-input v-model="pathmodel.chance.clientCompany.clientcompanyname" disabled></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="阶段" prop="phase">
                            <el-input v-model="pathmodel.chance.phase" disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="行业" prop="areaname">
                            <el-input v-model="pathmodel.chance.areaname" disabled></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="预算" prop="budget">
                            <el-input v-model="pathmodel.chance.budget" disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="日期" prop="phase">
                            <el-input v-model="pathmodel.chance.chancedatetime" disabled></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="线索来源" prop="user">
                            <el-input v-model="pathmodel.user.name" disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>

            <div class="basic-info-border2 max-width-box">
                <el-row gutter="20">
                    <el-col :span="11">
                        <el-form-item label="拜访人" prop="visitor">
                            <el-input v-model="pathmodel.visitor"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">

                        <el-form-item label="拜访时间" prop="visittime">
                            <el-date-picker v-model="pathmodel.visittime" type="datetime" placeholder="选择日期时间"
                                style="width: 100%;">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row gutter="20">
                    <el-col :span="22">
                        <el-form-item label="事宜" prop="thing">
                            <el-input v-model="pathmodel.thing"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-form-item label="情况说明" prop="situation">
                    <el-input type="textarea" :rows="4" v-model="pathmodel.situation" style="width: 750px"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="comment">
                    <el-input type="textarea" :rows="4" v-model="pathmodel.comment" style="width: 750px"></el-input>
                </el-form-item>
            </div>



        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="updatestaff"> 确认 </el-button>
            </span>
        </template>

    </el-dialog>


    <el-dialog v-model="dialogVisible2" :title="title" width="60%">

        <el-form :model="pathmodel2" ref="formref" :rules="rules2" label-width="100px" style="padding-right: 30px">
            <div class="basic-info-border max-width-box">
                <el-row gutter="20">

                    <el-col :span="22">
                        <el-form-item label="机会名称" prop="chanceid">
                            <el-select v-model="pathmodel2.chanceid" placeholder="请选择机会" style="width: 100%;" @change="handleChanceChange">
                                <el-option v-for="item in chanceOptions" :key="item.chanceid" :label="item.chancename"
                                    :value="item.chanceid"></el-option>
                            </el-select>
                        </el-form-item>


                    </el-col>

                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="客户" prop="clientCompany">
                            <el-input v-model="pathmodel4.chance.clientCompany.name" disabled></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="阶段" prop="phase">
                            <el-input v-model="pathmodel4.chance.phase" disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="行业" prop="areaname">
                            <el-input v-model="pathmodel4.chance.areaname" disabled></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="预算" prop="budget">
                            <el-input v-model="pathmodel4.chance.budget" disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="日期" prop="phase">
                            <el-input v-model="pathmodel4.chance.chancedatetime" disabled></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="线索来源" prop="user">
                            <el-input v-model="pathmodel4.user.name" disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>


            <div class="basic-info-border2 max-width-box">
                <el-row gutter="20">
                <el-col :span="11">
                    <el-form-item label="拜访人" prop="visitor">
                        <el-input v-model="pathmodel2.visitor"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11">

                    <el-form-item label="拜访时间" prop="visittime">
                        <el-date-picker v-model="pathmodel2.visittime" type="datetime" placeholder="选择日期时间"
                            style="width: 100%;">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row gutter="20">
                <el-col :span="11">
                    <el-form-item label="事宜" prop="thing">
                        <el-input v-model="pathmodel2.thing"></el-input>
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row gutter="20">
                <el-col :span="22">
                    <el-form-item label="情况说明" prop="situation">
                <el-input type="textarea" :rows="4" v-model="pathmodel2.situation" style="width: 750px"></el-input>
            </el-form-item>
                </el-col>

            </el-row>
            <el-row gutter="20">
                <el-col :span="22">
                    <el-form-item label="备注" prop="comment">
                <el-input type="textarea" :rows="4" v-model="pathmodel2.comment" style="width: 750px"></el-input>
            </el-form-item>
                </el-col>

            </el-row>
            
        </div>
        </el-form>

           
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible2 = false">取消</el-button>
                <el-button type="primary" @click="addstaff"> 确认 </el-button>
            </span>
        </template>

    </el-dialog>
    、


</template>

<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}


.basic-info-border {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    right: -10px;
    position: relative;
    padding-top: 30px;
    /* 增加内边距，为标题留出更多空间 */
    margin-right: -10px;
    /* 调整外边距，使边框线不重合 */
}

.basic-info-border::before {
    content: "机会信息";
    position: absolute;
    top: -15px;
    /* 将标题移动到边框上方 */
    left: 10px;

    /* 根据需要调整左边距 */
    background-color: #409EFF;
    color: white;
    padding: 5px;
    border-radius: 3px;
    font-weight: bold;
}

.basic-info-border2 {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    right: -10px;
    position: relative;
    padding-top: 30px;
    /* 增加内边距，为标题留出更多空间 */
    margin-right: -10px;
    /* 调整外边距，使边框线不重合 */
}

.basic-info-border2::before {
    content: "跟踪信息";
    position: absolute;
    top: -15px;
    /* 将标题移动到边框上方 */
    left: 10px;

    /* 根据需要调整左边距 */
    background-color: #409EFF;
    color: white;
    padding: 5px;
    border-radius: 3px;
    font-weight: bold;
}
</style>